<template>
  <div class="realNameVerification-wrap">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field label="账号" v-model="phone" readonly />
        <van-field v-model="formData.verificationCode" label="验证码" placeholder="验证码" :rules="[{ required: false, message: '请输入验证码  ' }]">
          <template #right-icon>
            <span class="solts">
              <van-button type="primary" class="getCodeClass" @click="getImgcode" :disabled="!!formData.counter">{{formData.sendBtnText}}</van-button>
            </span>
          </template>
        </van-field>
        <van-field v-model="formData.password" type="password" label="新密码" placeholder="请输入8-20位数字密码" />
        <van-field v-model="formData.payPassword" type="password" label="确认密码" placeholder="请再次输入密码" />
      </van-cell-group>
    </van-form>

    <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="onSubmit">确定</van-button>

  </div>
  <div v-if="formData.imgcodeShow" class="imgcode">

    <div class="warp">
      <van-icon name="close" @click="close" class='close' />
      <h1>请输入图像验证码</h1>
      <div class="flex">
        <img :src="formData.img" alt="">
        <van-cell-group inset>
          <van-field v-model="formData.imgcode" required placeholder="请输入验证码" />
        </van-cell-group>

      </div>
      <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="GetCode">确定</van-button>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, computed, onMounted, ref } from 'vue'
import { useStore } from "vuex";
import { useRouter } from 'vue-router'
import { resetPassword, getCode, imgcode } from "@/api/user";
import { Toast } from "vant";
import { formatPhoneNumber } from "@/utils/phone";
import { getLocal } from "@/utils/localStorage";
export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const formData = reactive({
      oripassword: '',
      password: '',
      payPassword: "",
      passwordType: "password",
      loading: false,
      sendBtnText: "获取验证码",
      verificationCode: '',
      mobile: store.getters.user_info.mobile,
      imgcodeShow: false,
    })
    const phone = ref()
    onMounted(() => {
      const tel = store.getters.user_info.mobile
      phone.value = formatPhoneNumber(store.getters.user_info.mobile)
      console.log(store.getters.user_info.mobile)

    })

    const switchPasswordType = () => {
      formData.passwordType = formData.passwordType === 'password' ? 'text' : 'password'
    }
    const onSubmit = async () => {
      const tel = localStorage.getItem('tel')
      const data = {
        mobile: tel,
        verificationCode: formData.verificationCode,
        password: formData.payPassword,
        oldPassword: formData.oripassword
      }
      if (!formData.password || !formData.verificationCode) {
        return Toast('请输入完整信息')
      } else if (formData.password != formData.payPassword) {
        return Toast('两次密码不一致')
      }
      formData.loading = true
      resetPassword(data).then(async res => {
        if (res.data.success) {
          formData.loading = false
          Toast(res.data.message)
          router.back()
          formData.loading = false
          await store.dispatch('user/getUserAll')
        }
        formData.loading = false
      })
    }
    const close = () => {
      formData.imgcodeShow = false
    }
    const getImgcode = () => {
      if (formData.mobile === '') {
        Toast('请填写手机号');
        return
      }
      formData.imgcodeShow = true
      imgcode().then(res => {
        console.log(res)
        if (res.data.success) {
          formData.img = res.data.data.img
          formData.uuid = res.data.data.uuid
        } else {
          formData.imgcodeShow = false

        }

      })
    }
    const GetCode = async () => {
      const tel = localStorage.getItem('tel')
      const data = { mobile: tel, type: 2, uuid: formData.uuid, verificationCode: formData.imgcode }
      Toast.loading({
        duration: 0,
        forbidClick: true
      });

      getCode(data).then(res => {
        console.log(res)
        if (!res.data.success) {
          getImgcode()

          Toast.fail(res.data.message);

        } else {
          formData.imgcodeShow = false
          Toast.clear();
          formData.counter = 60
          formData.sendBtnText = `(${formData.counter}秒)后重新发送`
          const timer = setInterval(() => {
            formData.counter--
            formData.sendBtnText = `(${formData.counter}秒)后重新发送`
            if (formData.counter <= 0) {
              formData.sendBtnText = "获取验证码"
              clearInterval(timer)
            }
          }, 1000)
        }

      })
    }
    return {
      phone,
      user_info,
      switchPasswordType,
      formData,
      onSubmit,
      getImgcode,
      GetCode,
      close,
      formatPhoneNumber
    }
  }
})
</script>
<style lang="less" scoped>
.imgcode {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  height: 80vh;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 4rem;
  .block_gradual {
    margin: 0.6rem 0px;
  }
  h1 {
    font-size: 36px;
    text-align: center;
  }
  .warp {
    position: relative;
    background: white;
    padding: 5%;
    border-radius: 8px;
    width: 80%;
    margin: 0 auto;
    .close {
      position: absolute;
      font-size: 0.7rem;
      right: 3%;
      top: 3%;
    }
    .flex {
      margin-top: 0.5rem;
      display: flex;
      &:deep(.van-field) {
        border: solid 1px #8c8a8a;
        border-radius: 4px;
        background: transparent !important;
      }
      &:deep(.van-field__control) {
        font-size: 26px;
        color: #282a2c;
      }
    }
  }
}
.realNameVerification-wrap {
  &:deep(.van-field__label) {
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff !important;
    line-height: 48px;
  }
  &:deep(.van-cell-group) {
    background: #282a2c !important;
    border: 1px solid #ffffff;
    border-radius: 50px !important;
    overflow: hidden;
  }
  &:deep(.van-cell:after) {
    opacity: 0.2;
  }
  &:deep(.van-field__control) {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
    opacity: 0.6;
  }
  padding: 0 30px;
  &:deep(.van-nav-bar__content) {
    background: #32363a;
  }

  .getCodeClass {
    height: 50px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
    border-radius: 24px;
    border: none;
  }
  &:deep(.van-field) {
    background: transparent;
    border-radius: 0px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  &:deep(.van-field:last-child) {
    border: none !important;
  }

  &:deep(.van-field__label) {
    color: #333;
  }
  &:deep(.van-cell-group) {
    margin: 0.5rem 0px 1rem;
    background: #fff;
    border-radius: 8px;
    padding: 0px 10px;
  }
  .van-form {
    margin-top: 60px;
    .van-row {
      font-size: 28px;
      font-weight: 400;
      color: #333;
      line-height: 48px;
    }
    .van-checkbox {
      margin-top: 60px;
      &:deep(.van-checkbox__icon) {
        width: 26px;
        height: 26px;
        font-size: 26px;
      }
      .isAggressDiv {
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        span {
          color: rgba(180, 132, 87, 1);
        }
      }
    }
    .van-button {
      margin-top: 20px;
    }
  }
}
</style>